<template>
  <div class="app-container">
    <div class="container-module" style="padding-bottom: 0">
      <el-form :inline="true" class="search-form" label-width="100px">
        <el-row style="display: flex">
          <div style="flex: 1">
            <el-form-item label="订单号" style="margin: 5px 0">
              <el-input clearable placeholder="请输入订单号" v-model="searchForm.order_no"
                onkeyup="value =value.replace(/[^a-zA-Z0-9]/g, '')" class="input-with-select">
              </el-input>
            </el-form-item>
            <el-form-item label="收货人姓名" style="margin: 5px 0">
              <el-input clearable placeholder="请输入收货人姓名" v-model="searchForm.recipient" type="text" min="1"
                class="input-with-select">
              </el-input>
            </el-form-item>
            <el-form-item v-if="searchDisplay" label="商品名称" style="margin: 5px 0">
              <el-input clearable placeholder="请输入商品名称" v-model="searchForm.goods_name" type="text" min="1"
                class="input-with-select">
              </el-input>
            </el-form-item>
            <el-form-item label="订单状态" style="margin: 5px 0">
              <el-select clearable v-model="searchForm.status" placeholder="请选择订单状态">
                <el-option v-for="item in [
                    { name: '待付款', id: 1 },
                    { name: '待发货', id: 2 },
                    { name: '待收货', id: 3 },
                    { name: '退货、售后', id: 4 },
                    { name: '已收货', id: 5 },
                    { name: '已取消', id: 9 },
                  ]" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="searchDisplay" label="用户ID" style="margin: 5px 0">
              <el-input clearable placeholder="请输入用户ID" v-model="searchForm.user_id"
                onkeyup="value =value.replace(/[^a-zA-Z0-9]/g, '')" class="input-with-select">
              </el-input>
            </el-form-item>

            <el-form-item v-if="searchDisplay" label="商品ID" style="margin: 5px 0">
              <el-input clearable placeholder="请输入商品ID" v-model="searchForm.goods_id" type="text" min="1"
                class="input-with-select">
              </el-input>
            </el-form-item>

            <el-form-item v-if="searchDisplay" label="供货商ID" style="margin: 5px 0">
              <el-input clearable placeholder="请输入供货商ID" v-model="searchForm.supplier_id" type="text" min="1"
                class="input-with-select">
              </el-input>
            </el-form-item>
            <el-form-item v-if="searchDisplay" label="店铺/商户ID" style="margin: 5px 0">
              <el-input clearable placeholder="请输入店铺/商户ID" v-model="searchForm.mer_id" type="text" min="1"
                class="input-with-select">
              </el-input>
            </el-form-item>

            <el-form-item v-if="searchDisplay" label="下单起始时间" style="margin: 5px 0">
              <el-date-picker v-model="create_time" type="datetimerange" @change="create_timeWay"
                value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" align="right">
              </el-date-picker>
            </el-form-item>
            <el-form-item v-if="searchDisplay" label="支付起始时间" style="margin: 5px 0">
              <el-date-picker v-model="pay_time" type="datetimerange" @change="pay_timeWay"
                value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" align="right">
              </el-date-picker>
            </el-form-item>
          </div>
          <div style="padding: 5px 0">
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search" @click="getListWay">查询</el-button>
              <el-button size="small" type="primary" icon="el-icon-refresh" @click="resetting">重置</el-button>
              <el-button v-if="!searchDisplay" type="warning" icon="el-icon-caret-bottom"
                @click="searchDisplay = true">展开</el-button>
              <el-button v-else type="warning" icon="el-icon-caret-top" @click="searchDisplay = false">收起</el-button>
            </el-form-item>
          </div>
        </el-row>
      </el-form>
    </div>
    <el-divider></el-divider>

    <div style="padding: 0 20px 20px">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-button icon="el-icon-tickets" type="primary" :loading="exportLoading"
              @click="exportSupplierListWay">批量导出</el-button>
            <el-button icon="el-icon-truck" type="primary" @click="doOpen">批量发货</el-button>
            <el-button icon="el-icon-position" type="primary" @click="manualDelivery">手动发货</el-button>
          </el-col>
          <el-col :span="4" style="float: right">
            <div class="right-panel el-button-group">
              <el-button class="" icon="el-icon-refresh" size="mini" @click="getListWay"></el-button>
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button class="" icon="el-icon-s-operation" size="mini"></el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                      tableTheadOptions[fruit].label
                    }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col class="new_table_card">
          <el-table ref="tablerefs" highlight-current-row :data="OrderList" :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange" height="100%">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label" :width="
                tableTheadOptions[fruit].width
                  ? tableTheadOptions[fruit].width + 'px'
                  : 'auto'
              " align="center">
              <template slot-scope="scope">
                <div v-if="fruit == 'user_avatar' || fruit == 'goods_main_image'"
                  style="width: 40px; height: 40px; margin: 0 auto">
                  <el-image v-if="scope.row[fruit]" :src="scope.row[fruit]" :preview-src-list="[scope.row[fruit]]" />
                </div>

                <span v-else-if="fruit == 'addr_province_name'">
                  <el-tooltip placement="top-start"
                    :content="scope.row.addr_province_name +  scope.row.addr_city_name + scope.row.addr_district_name + ''">
                    <div class="one_line_hidden">
                      {{
                        scope.row.addr_province_name
                          ? scope.row.addr_province_name
                          : ""
                      }}
                      {{
                        scope.row.addr_city_name
                          ? scope.row.addr_city_name
                          : ""
                      }}
                      {{
                        scope.row.addr_district_name
                          ? scope.row.addr_district_name
                          : ""
                      }}
                    </div>
                  </el-tooltip>

                </span>
                <span v-else>
                  <el-tooltip placement="top-start" :content="scope.row[fruit] + ''">
                    <div class="one_line_hidden">
                      {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                    </div>
                  </el-tooltip>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" fixed="right" width="150" prop="address" label="操作">
              <template slot-scope="scope">
                <el-button v-hasPermi="'orderlist/qfh'" v-if="scope.row.status == 2" type="text" size="mini"
                  @click="editNotesWay(scope.row)">
                  去发货
                </el-button>
                <el-button v-if="scope.row.status == 1" type="text" size="mini">
                  待支付
                </el-button>
                <el-button v-if="scope.row.status == 3" type="text" size="mini">
                  待收货
                </el-button>
                <el-button v-if="scope.row.status == 4" type="text" size="mini">
                  售后
                </el-button>
                <el-button v-if="scope.row.status == 5" type="text" size="mini">
                  已收货
                </el-button>
                <el-button v-if="scope.row.status == 6" type="text" size="mini">
                  已完成
                </el-button>
                <el-button v-if="scope.row.status == 9" type="text" size="mini">
                  已取消
                </el-button>
                <el-button type="text" size="mini" @click="detailsDialogway(scope.row)">
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table></el-col>
      </el-row>
      <el-row style="text-align: right">
        <pagination v-show="total > 0" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.pageSize"
          @pagination="getListWay" />
      </el-row>
    </div>

    <!-- 去发货弹框 -->
    <el-dialog :close-on-click-modal="false" title="去发货" :visible.sync="dialogSendOutGoods" width="500px"
      @close="SendOutGoodsClose" custom-class="custorm">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="快递名称" prop="express_name">
          <el-input maxlength="20" show-word-limit clearable v-model="form.express_name"
            placeholder="请输入快递名称"></el-input>
        </el-form-item>
        <el-form-item label="快递单号" prop="express_num">
          <el-input clearable maxlength="20" show-word-limit v-model="form.express_num"
            placeholder="请输入快递单号"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogSendOutGoods = false">取 消</el-button>
        <el-button type="primary" @click="submitWay" :loading="dialogSendOutGoodsSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 查看快递信息 -->
    <el-dialog :close-on-click-modal="false" title="快递信息" :visible.sync="dialogdelivery" width="700px"
      custom-class="custorm">
      <el-descriptions :style="index !== 0 ? 'margin-top:20px' : ''" v-for="(item, index) in delivery_list" :key="index"
        class="margin-top" :title="item.express_name" :column="3" border>
        <el-descriptions-item label="快递">
          {{ item.express_name }}
        </el-descriptions-item>
        <el-descriptions-item label="订单号">
          {{ item.express_num }}
        </el-descriptions-item>
        <el-descriptions-item label="发货时间">
          {{ item.created_at }}
        </el-descriptions-item>
        <el-descriptions-item label="收货人名称">
          {{ item.recipient }}
        </el-descriptions-item>
        <el-descriptions-item label="收货人手机号">
          {{ item.phone_number }}
        </el-descriptions-item>
        <el-descriptions-item label="省市区">
          {{ item.province_name }}
          {{ item.city_name }}
          {{ item.district_name }}
        </el-descriptions-item>
        <el-descriptions-item label="详细地址">
          {{ item.address_details }}
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogdelivery = false">取 消</el-button>
        <el-button type="primary" @click="dialogdelivery = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="订单信息" size="70%" :withHeader="false"
      :visible.sync="detaildialog" @close="addressClose" :show-close="true">
      <div style="position: relative" v-loading="detailLoading">
        <div class="drawerTitle">
          <span>订单信息</span>
          <div class="close" @click="addressClose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>

        <div class="drawerContent" style="padding: 15px 30px;">
          <!-- <div class="tabsView">
            <el-tabs v-model="activeNames">
              <el-tab-pane label="订单详情" name="order_details"> </el-tab-pane>
              <el-tab-pane label="物流信息" name="logistics_information">
              </el-tab-pane>
            </el-tabs>
          </div> -->
          <div v-if="activeNames == 'order_details'">
            <div class="informationTitleView">
              <div class="leftBox">
                <div class="leftborder"></div>
                <div class="text">订单状态</div>
              </div>
              <div class="right">
                <el-button style="margin: 5px; color: #fff" v-hasPermi="'orderlist/qfh'" v-if="detailsObj.status == 2"
                  type="warning" size="mini" @click="editNotesWay(detailsObj)">
                  <div style="color: #fff">去发货</div>
                </el-button>
              </div>
            </div>
            <div style="padding: 0 10px">
              <el-descriptions :column="2">
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="订单状态">
                  <div style="color: #1890ff;" v-if="detailsObj.status ? detailsObj.status == 2 : false" type="warning">
                    待发货</div>
                  <div style="color: #1890ff;" v-if="detailsObj.status ? detailsObj.status == 3 : false" type="warning">
                    待收货</div>
                  <div style="color: #1890ff;" v-if="detailsObj.status ? detailsObj.status == 5 : false" type="success">
                    交易完成</div>
                  <div style="color: #1890ff;" v-if="detailsObj.status ? detailsObj.status == 1 : false" type="success">
                    待支付</div>
                  <div style="color: #1890ff;" v-if="detailsObj.status ? detailsObj.status == 4 : false" type="success">
                    售后</div>
                  <div style="color: #1890ff;" v-if="detailsObj.status ? detailsObj.status == 6 : false" type="success">
                    已完成</div>
                  <div style="color: #1890ff;" v-if="detailsObj.status ? detailsObj.status == 9 : false" type="success">
                    已取消</div>
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="informationTitleView">
              <div class="leftBox">
                <div class="leftborder"></div>
                <div class="text">商品信息</div>
              </div>
              <div class="right"></div>
            </div>
            <div style="padding: 0 10px">
              <el-descriptions :column="2">
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="供货商">
                  {{
                    detailsObj.supplier_name ? detailsObj.supplier_name : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="供货商ID">
                  {{
                    detailsObj.supplier_id ? detailsObj.supplier_id : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="商品名称">
                  <el-tooltip placement="top-start" :content="detailsObj.goods_name">
                    <div class="one_line_hidden">
                      {{ detailsObj.goods_name ? detailsObj.goods_name : "-" }}
                    </div>
                  </el-tooltip>
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="商品ID">
                  {{
                    detailsObj.goods_id
                      ? detailsObj.goods_id
                      : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="商品图片">
                  <div style="width: 40px; height: 40px">
                    <el-image :src="
                        detailsObj.goods_main_image
                          ? detailsObj.goods_main_image
                          : '-'
                      " :preview-src-list="[
                        detailsObj.goods_main_image
                          ? detailsObj.goods_main_image
                          : '-',
                      ]" />
                  </div>
                </el-descriptions-item>

                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="规格单位">
                  {{
                    detailsObj.product_unit
                      ? detailsObj.product_unit
                      : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="规格零售">
                  {{
                    detailsObj.product_retail_price
                      ? detailsObj.product_retail_price
                      : "-"
                  }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="informationTitleView">
              <div class="leftBox">
                <div class="leftborder"></div>
                <div class="text">订单信息</div>
              </div>
              <div class="right"></div>
            </div>
            <div style="padding: 0 10px">
              <el-descriptions :column="2">
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="支付时间">
                  {{
                    detailsObj.pay_time ? detailsObj.pay_time : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="购买数量">
                  {{
                    detailsObj.buy_number ? detailsObj.buy_number : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="余额单价">
                  {{ detailsObj.price_unit ? detailsObj.price_unit : "-" }}
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="总余额">
                  <span style="color: #1890ff;">
                    {{ detailsObj.price_total ? detailsObj.price_total : "-" }}
                  </span>
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="积分单价">

                  {{ detailsObj.points_unit ? detailsObj.points_unit : "-" }}
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="总积分">
                  <span style="color: #1890ff;">{{ detailsObj.points_total ? detailsObj.points_total : "-" }}</span>

                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="提货券单价">

                  {{ detailsObj.coupon_unit ? detailsObj.coupon_unit : "-" }}
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="总提货券">
                  <span style="color: #1890ff;">
                    {{ detailsObj.coupon_total ? detailsObj.coupon_total : "-" }}
                  </span>

                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="总运费">

                  {{ detailsObj.freight_total ? detailsObj.freight_total : "-" }}
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="总优惠折扣">

                  {{ detailsObj.discount_total ? detailsObj.discount_total : "-" }}
                </el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="订单流水号">
                  {{
                    detailsObj.trade_no ? detailsObj.trade_no : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="收货人">
                  {{
                    detailsObj.addr_recipient
                      ? detailsObj.addr_recipient
                      : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="收货人电话">
                  {{
                    detailsObj.addr_phone_number
                      ? detailsObj.addr_phone_number
                      : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="省市区">
                  {{
                    detailsObj.addr_province_name
                      ? detailsObj.addr_province_name
                      : "-"
                  }}
                  {{
                    detailsObj.addr_city_name
                      ? detailsObj.addr_city_name
                      : "-"
                  }}
                  {{
                    detailsObj.addr_district_name
                      ? detailsObj.addr_district_name
                      : "-"
                  }}</el-descriptions-item>
                <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsLabel"
                  label="详细地址">
                  {{
                    detailsObj.addr_address_details
                      ? detailsObj.addr_address_details
                      : "-"
                  }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
          <div v-if="activeNames == 'logistics_information'">
          </div>
        </div>
      </div>
    </el-drawer>
    <el-dialog title="批量导出(一次最多可以导出100个订单)" :visible.sync="dialogClass" width="600px" :before-close="CloseDialogLabel">
      <el-row :gutter="20">
        <el-form status-icon label-width="140px" class="demo-ruleForm">
          <el-col :span="22">
            <el-form-item label="导出数量（1-100）" prop="">
              <el-input type="number" v-model="count" max="100" min="1" @input="handleInputBlur" clearable
                placeholder="请输入导出订单数量,最大为100"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="CloseDialogLabel">取 消</el-button>
        <el-button :loading="submitLoading" type="primary" @click="submitFormClass()">确 定</el-button>
      </span>
    </el-dialog>
    <!--    批量发货-->
    <batch-delivery ref="refBatch" />
    <!--    手动发货-->
    <batch-elivery ref="refElivery" :multiple-selection="multipleSelection" @getListWay="getListWay"
      @doClone="doClone" />
  </div>
</template>

<script>
  import {
    // getSupplyOrderList,
    getOrderList,
    editDelivery,
    getSupplyryList,
    orderGetListExport
  } from "@/api/order/index";
  import BatchDelivery from './components/batch_delivery.vue'
  import BatchElivery from './components/batch_elivery.vue'
  const tableTheadOption = {
    trade_no: {
      label: "订单号",
      field: "trade_no",
      width: 200,
    },
    buy_number: {
      label: "购买数量",
      field: "buy_number",
      width: 90,
    },
    created_at: {
      label: "下单时间",
      field: "created_at",
    },
    pay_time: {
      label: "支付时间",
      field: "pay_time",
    },
    supplier_name: {
      label: "供货商",
      field: "supplier_name",
    },
    mer_name: {
      label: "商户",
      field: "mer_name",
    },
    goods_name: {
      label: "商品名称",
      field: "goods_name",
    },
    goods_main_image: {
      label: "商品主图",
      field: "goods_main_image",
    },
    user_nickname: {
      label: "用户昵称",
      field: "user_nickname",
    },
    addr_recipient: {
      label: "收货人",
      field: "addr_recipient",
      width: 90,
    },
    addr_phone_number: {
      label: "收货人电话",
      field: "addr_phone_number",
    },
    addr_province_name: {
      label: "收货地区",
      field: "addr_province_name",
    },
    addr_address_details: {
      label: "收货人详细地址",
      field: "addr_address_details",
    },
  };
  const allTableThead = [
    "supplier_name",
    "mer_name",
    "trade_no",
    "buy_number",
    "created_at",
    "pay_time",

    "goods_name",
    "goods_main_image",
    "user_nickname",
    "addr_recipient",
    "addr_phone_number",
    "addr_province_name",
    "addr_address_details",
  ];
  const defaultTableThead = [
    "supplier_name",
    "mer_name",
    "trade_no",
    "goods_name",
    "buy_number",
    "addr_recipient",
    "addr_phone_number",
    "addr_province_name",
  ];
  export default {
    components: {
      BatchDelivery,
      BatchElivery
    },
    watch: {
      checkboxTableThead(valArr) {
        this.tableThead = this.allTableThead.filter(
          (i) => valArr.indexOf(i) >= 0
        );
        this.tableKey = this.tableKey + 1;
        this.$nextTick(() => {
          this.$refs.tablerefs.doLayout();
        });
      },
    },
    data() {
      return {
        count: 10,
        dialogClass: false, //批量导出
        exportLoading: false,
        shippingDetails: {}, // 详情-手动发货
        multipleSelection: [], // 当前选中的列表-手动发货临时保存
        activeNames: "order_details",
        // 默认表头
        tableTheadOptions: tableTheadOption,
        allTableThead: allTableThead,
        tableThead: defaultTableThead, // 默认表头
        checkboxTableThead: defaultTableThead, // 默认表头值
        tableKey: 1, // 为了保证table 每次都会重渲
        loading: false,
        searchDisplay: false,
        searchForm: {
          order_no: "", //根据订单号
          user_id: "", // 根据用户ID
          status: "", //订单状态：1=待付款；2=待发货；3=待收货；4=退货、售后；5=已收货；9=已取消
          phone_number: "", // 收货人电话检索
          recipient: "", // 收货人姓名检索
          goods_id: "", // 商品ID检索
          goods_name: "", // 商品名称检索
          supplier_id: "", // 供货商ID检索
          mer_id: "", // 店铺/商户ID检索（0=平台自营）
          create_time_start: "", //下单起始时间（例：2023-10-01 12:20）
          create_time_end: "", //下单截至时间（例：2023-10-02 12:20）
          pay_time_start: "", //支付起始时间（例：2023-10-01 12:20）
          pay_time_end: "", //支付截至时间（例：2023-10-02 12:20）
          pageSize: 10,
          page: 1,
        },
        pickerOptions: {
          shortcuts: [{
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        },
        create_time: [],
        pay_time: [],
        OrderList: [],
        total: 0,
        dialogSendOutGoods: false,
        dialogSendOutGoodsSubmit: false,
        form: {
          detail_id: "",
          express_name: "",
          express_num: "",
        },
        rules: {
          express_name: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (value == "") {
                return callback(new Error("请输入快递名称"));
              } else {
                if (req.test(value)) {
                  return callback(
                    new Error("快递单号格式不正确,不能包含特殊字符")
                  );
                }
                callback();
              }
            },
            trigger: "change",
          }, ],
          express_num: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z]/g;
              if (value == "") {
                return callback(new Error("请输入快递单号"));
              } else {
                if (req.test(value)) {
                  return callback(
                    new Error("快递单号格式不正确,只能包含数字和英文")
                  );
                }
                callback();
              }
            },
            trigger: "change",
          }, ],
        },
        dialogdelivery: false,
        delivery_list: [],
        detailsObj: {},
        detaildialog: false,
        detailLoading: false,
        recordsList: [], // 发货记录
        submitLoading:false
      };
    },
    created() {
      this.getListWay();
    },
    methods: {
      handleInputBlur() {
        const value = parseInt(this.count)
        if (Number.isInteger(value) && value >= 1 && value <= 100) {
          // 处理正确的输入
        } else {
          this.$message.error('请输入1-100的整数')
          this.count = ''
        }
      },
      CloseDialogLabel() {
        this.dialogClass = false
      },
      doOpen() {
        this.$refs.refBatch.open()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      doClone(row) {
        this.multipleSelection = this.multipleSelection.filter(item => item.detail_id !== row.detail_id)
        this.OrderList.forEach(item => {
          if (item.detail_id === row.detail_id) {
            this.$refs.tablerefs.toggleRowSelection(item, false)
          }
        })
      },
      manualDelivery() {
        if (this.searchForm.status != 2) {
          return this.$messages.error('请选择待发货订单进行导出')
        }
        if (!this.multipleSelection.length) {
          return this.$messages.error('请选择一条订单')
        }
        this.$refs.refElivery.open()
      },
      submitFormClass(){
        this.submitLoading = true
        this.exportLoading = true
        const form = {
          ...this.searchForm,
          pageSize: this.count
        }
        orderGetListExport(form).then(res => {
          if (res.code === 200) {
            window.location.href = res.data.url
            this.$messages.success('导出成功')

          } else {

            this.$messages.info(res.msg)
          }
          this.dialogClass = false
          this.exportLoading = false
          this.submitLoading = false
        }).catch(() => {
          this.dialogClass = false
          this.exportLoading = false
          this.submitLoading = false
        })
      },
      exportSupplierListWay() {
        if (this.searchForm.status !== 2) {
          return this.$messages.error('只能导出待发货订单')
        }
        this.dialogClass = true


      },
      addressClose() {
        this.detaildialog = false;
      },
      getListWay() {
        this.loading = true;
        if (this.searchForm.status == '') {
          this.searchForm.status = 2
        }

        getOrderList(this.searchForm)
          .then((res) => {
            this.loading = false;
            if (res.code !== 200 || res.status !== 1) {
              return this.$messages.error(res.msg);
            }
            this.OrderList = res.data.list;
            this.total = res.data.total;
          })
          .catch((err) => {
            this.loading = false;
            this.$messages.error(err.msg);
          });
      },
      resetting() {
        this.searchForm = {
          status: "", // 订单状态：1=待发货；2=待收货；3=交易完成
          supplier_goods_id: "", // 供货商商品ID检索
          supplier_goods_name: "", // 商品名称检索
          supplier_id: "", // 供货商ID检索
          order_trade_no: "", // 订单流水号检索
          pay_order_no: "", // 根据订单支付单号检索
          user_nickname: "", // 根据用户昵称检索
          user_mobile: "", // 根据用户手机号检索
          addr_recipient: "", // 根据收货人姓名检索
          addr_phone_number: "", // 收货人电话检索
          addr_details: "", // 	根据收货地址检索
          create_time_start: "", // 下单起始时间（例：2023-10-01 12:20）
          create_time_end: "", // 下单截至时间（例：2023-10-02 12:20）
          pay_time_start: "", // 支付起始时间（例：2023-10-01 12:20）
          pay_time_end: "", // 支付成截至时间（例：2023-10-02 12:20）
          pageSize: 10,
          page: 1,
        };
        this.getListWay();
      },
      // 打开修改备注的弹框
      editNotesWay(row) {
        this.dialogSendOutGoods = true;
        this.$nextTick(() => {
          this.SendOutGoodsClose();
          this.form.detail_id = row.detail_id;
        });
      },
      SendOutGoodsClose() {
        this.form = {
          detail_id: "",
          express_name: "",
          express_num: "",
        };
        this.$refs.form.resetFields();
      },
      submitWay() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.dialogSendOutGoodsSubmit = true;
            editDelivery(this.form)
              .then((res) => {
                if (res.code !== 200 || res.status !== 1) {
                  return this.$messages.error(res.msg);
                }
                this.SendOutGoodsClose();
                this.dialogSendOutGoods = false;
                this.dialogSendOutGoodsSubmit = false;
                this.$messages.success(res.msg);
                this.detaildialog = false;
                this.getListWay();
              })
              .catch((err) => {
                this.dialogSendOutGoodsSubmit = false;
                this.$messages.error(err.msg);
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      drawerHandle(row) {
        this.delivery_list = row.delivery_list;
        this.dialogdelivery = true;
      },
      pathWay() {
        this.$router.push("/supplier/orderlist/supplierafter");
      },
      create_timeWay(vla) {
        this.searchForm.create_time_start = vla[0];
        this.searchForm.create_time_end = vla[1];
      },
      pay_timeWay(vla) {
        this.searchForm.pay_time_start = vla[0];
        this.searchForm.pay_time_end = vla[1];
      },
      detailsDialogway(row) {
        this.detaildialog = true;
        this.detailLoading = false;
        this.detailsObj = JSON.parse(JSON.stringify(row));
        // getSupplyryList({ detail_id: row.detail_id }).then((res) => {

        //   if (res.code !== 200 || res.status !== 1) {
        //     this.detailLoading = false;
        //     return this.$messages.error(res.msg);
        //   }
        //   this.recordsList = res.data;
        //   this.detailLoading = false;
        // });
      },
    },
  };
</script>

<style lang="scss">
  .labelView {
    width: 150px;
  }
</style>
